<%--
  Created by IntelliJ IDEA.
  User: acer
  Date: 2020/6/1
  Time: 9:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="true" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>客户列表</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
    <div id="root1">
        <Collapse value="Panel">
            <Panel name="Panel">
                多条件查询
                <p slot="content">
                    <i-form :label-width="60" inline>
                        <Form-Item label="用户编码">
                            <i-input type="text" v-model="userVo.userCode"></i-input>
                        </Form-Item>
                        <Form-Item label="用户名字">
                            <i-input type="text" v-model="userVo.userName"></i-input>
                        </Form-Item>
                        <i-button type="primary" @click="pageNo=1;getList();">搜索</i-button>
                    </i-form>
                </p>
            </Panel>
        </Collapse>
        <Card style="margin: 20px 0" >

            <Icon type="ios-film-outline"></Icon>
            数据列表
            <shiro:hasPermission name="user:add">
            <i-button type="primary"  @click="add" :style="{float:'right'}">添加角色</i-button>
            </shiro:hasPermission>

        </Card>
        <i-table :columns="columns" :data="data" border stripe height="370">
            <template slot-scope="{row,index}" slot="qy"><i-Switch :value="row.whether === 1?true:false" @on-change="change(row,index)"  /></template>
            <template slot-scope="{ row, index }" slot="action">
                <i-Button type="primary"  @click="chak(row)">禁用原因</i-Button>
            </template>
        </i-table>
        <template>
            <Page :total="total1"
                  show-total
                  show-elevator
                  :page-size="pageSize"
                  style="margin-left: 30%;"
                  :current.sync="pageNo"
                  show-sizer
                  :page-size-opts="[5,10,15,20]"
                  @on-page-size-change="pageSize=arguments[0];getList();"
                  @on-change="getList"/>
        </template>

        <Modal v-model="modaladd" title="添加角色" @on-ok="doadd">
            <i-form :label-width="80">
                <Form-Item label="账号">
                    <i-input v-model="user.userCode" @keyup.native="$event.target.value = $event.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]*$/,'')"></i-input>
                </Form-Item>
                <Form-Item label="姓名">
                    <i-input v-model="user.userName" @keyup.native="$event.target.value = $event.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]*$/,'')"></i-input>
                </Form-Item>
                <Form-Item label="密码">
                     <i-input v-model="user.password" type="password" @keyup.native="$event.target.value = $event.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]*$/,'')"></i-input>
                    <p style="color:red;font-size:10px;">*&nbsp;账号、姓名、密码中不能有空格和标点符号，如果输入将自动删除</p>
                </Form-Item>
            </i-form>
        </Modal>
        <Modal v-model="modalchak" title="查看被禁用原因" @on-ok="">
            <p>{{user.disable}}</p>
        </Modal>
        <Modal v-model="modalupdate" title="输入被禁原因" @on-ok="doupdate" @on-cancel="isok()">
            <i-input v-model="user.disable"></i-input>
        </Modal>
    </div>
</body>
<script>
    new Vue({
        el:"#root1",
        data:{
            columns:[
                {title:"编号",key:"id"},
                {title:"账号",key:"userCode"},
                {title:"姓名",key:"userName"},
                {title:"添加时间",key:"createdDate"},
                {title:"修改时间",key:"modifyDate"},
                {title:"是否禁用",slot:"qy"},
                {title:"操作",slot:"action"}
            ],
            data:[],
            user:{},
            modaladd:false,
            modalupdate:false,
            userVo:{},
            total1:{},
            pageSize:5,
            pageNo:1,
            modalchak:false,
        },
        mounted(){
            this.getList();
        },
        methods: {
            change (row,index) {
                if(row.whether==1){
                    row.whether=0;
                    this.user=row;
                    this.modalupdate=true;
                }else if(row.whether==0){
                    row.whether=1;
                    this.user=row;
                    this.user.disable="";

                    this.doupdate();
                }

            },
            isok(){
                this.getList();
            },
            doupdate(){
                axios.post(`/jur/user/update`,this.user)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg});
                        this.getList()
                    })
            },
            getList(){
                axios.post(`/jur/user/list/${this.pageSize}/${this.pageNo}`,this.userVo).then(
                    ({data})=>{
                        this.data=data.result.list;
                        this.total1 = data.result.total;
                    }
                )
            },
            getUserList(){
                axios.post("/jur/user/userList").then(
                    ({data})=>{
                        this.data=data.result;
                    }
                )
            },
            add(){
                this.user={};
                this.modaladd=true;
            },
            doadd(){
                axios.post(`/jur/user/add`,this.user)
                    .then(({data})=>{
                        if(data.code==1000){
                            iview.Message.success({content:data.msg});
                            this.getList();
                        }else {
                            iview.Message.error({content:data.msg});
                        }
                    })
            },
            chak(row){
                this.user=row;
                if(row.whether==0){
                    this.modalchak=true;
                }else {
                    iview.Message.info("该账号还可用，没有被封");
                }

            }
        }
    })
</script>
</html>
